<template>
	<view class="content">
		<view class="uni-card">
			<view class="uni-card-content">
				<view class="uni-card-content-inner">
					<view class="user">
						<view class="userInfo">
							<text class="userName">{{selfname}}</text>
							<text class="userPhone">{{selfphone}}</text>
						</view>
						<image :src="src" mode="aspectFill" @tap="toUpdatePortrait"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell" v-for="(item,index) in list" :key="index">
				<view class="uni-list-cell-navigate uni-navigate-right" @tap="clickItem(item)">
					<!-- <uni-icon size="30" :type="item.icon"></uni-icon> -->
					<image :src="item.icon" mode="scaleToFill" style="width: 45upx;height: 45upx;"></image>
					<text class="title">{{item.value}}</text>

				</view>
				<view class="line" v-if="index === 2"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				list: [{
						value: "修改电话",
						icon: '../../static/img/mine_phone.png',
						index: 0
					}, 
					// {
					// 	value: "修改头像",
					// 	icon: '../../static/img/mine_head.png',
					// 	index: 1
					// }, 
					{
						value: "修改密码",
						icon: '../../static/img/mine_pass.png',
						index: 2
					},
					{
						value: "帮助手册",
						icon: '../../static/img/mine_help.png',
						index: 3
					}
					// 					, {
					// 						value: "清理缓存",
					// 						icon: '../../static/img/mine_cache.png',
					// 						index: 4
					// 					}
					,
					{
						value: "注销账号",
						icon: '../../static/img/mine_logout.png',
						index: 5
					}
				],
				selfname: '',
				selfphone: '',
				src: '../../static/img/default_protrait.png'
			};
		},
		onLoad() {
			const userInfo = getApp().globalData.userInfo; //使用const声明的变量必须赋值初始化,但是不能在同一作用域类重新声明也无法重新赋值.
			if (userInfo) {
				this.selfname = userInfo.name+' '+userInfo.loginName;
				// js 判断数据是否为空 https://www.cnblogs.com/ooo0/p/6511723.html
			}
		},
		methods: {
			clickItem(item) {
				switch (item.index) {
					case 0:
						uni.navigateTo({
							url: '../mine/updatePhone/updatePhone'
						})
						break;
					case 1:
						uni.navigateTo({
							url: '../mine/updatePortrait/updatePortrait'
						})
						break;
					case 2:
						uni.navigateTo({
							url: '../mine/updatePassword/updatePassword'
						})
						break;
					case 3:
						uni.navigateTo({
							url: '../mine/helpManual/helpManual'
						})
						break;
// 					case 4:
// 						//暂无缓存需要清理
// 						uni.showModal({
// 							title: '提示',
// 							content: '清理缓存',
// 							success: function(res) {
// 								if (res.confirm) {
// 									console.log('用户点击确定');
// 								} else if (res.cancel) {
// 									console.log('用户点击取消');
// 								}
// 							}
// 						});
// 						break;
					case 5:
						let _this = this;
						uni.showModal({
							title: '提示',
							content: '确定退出系统么?',
							success: function(res) {
								if (res.confirm) {
									_this.$http.get('xagrid/logout');
									// 									try {
									// 										// uni.clearStorage(); //清理本地数据  不清，有账号密码
									// 									} catch (e) {
									// 										//TODO handle the exception
									// 									}
									uni.setStorage({
										key: "accessToken",
										data: '',
										success: function() {
											uni.reLaunch({
												url: '../login/login'
											});
										}
									});

								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						break;
					default:
						break;
				}
			},
			toUpdatePortrait() {
				uni.navigateTo({
					url: '../mine/updatePortrait/updatePortrait'
				})
			},
		},
		onShow() {
			try {
				console.log('lvgg', '回显');
				if (getApp().globalData.photo.length > 0) {
					this.src = 'http://image.tripln.top/gridfile' + getApp().globalData.photo;
				}

				if (getApp().globalData.mobile.length > 0) {
					this.selfphone = getApp().globalData.mobile;
				}
			} catch (e) {
				// error
				console.log(e.toString());
			}
		}
	}
</script>

<style>
	.viewBg {
		width: 100%;
		height: 100%;
		/* background-color: #0FAEFF; */
	}

	.header {
		width: 100%;
		height: 20%;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		border-radius: 10upx;
		box-shadow: 0 0 5upx 5upx #D9D9D9;
		padding: 16upx;
	}

	.user {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	image {
		width: 100upx;
		height: 100upx;
		border-radius: 50%
	}

	.userInfo {
		display: flex;
		flex-direction: column;
		margin: auto;
		margin-left: 10upx;
	}

	.uni-list-cell {
		flex-direction: column;
	}

	.uni-list-cell-navigate {
		justify-content: flex-start;

	}

	.title {
		margin-left: 20upx;
	}

	.line {
		height: 40upx;
		width: 100%;
		background-color: #F7F7F7;
	}
</style>
